<template>
  <div>
<el-col :span=6>
        <el-dropdown>
          <el-button type="primary" :loading=false>
            {{ menuText }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in this.menulist" :key="index" @click.native="onClickDropdown(item)">
              {{ item }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    <el-card>
      <div slot="header" class="clearfix">
        <span>视图</span>
      </div>
    <div id="main" style="width: 600px;height:500px;"></div>
    </el-card>
  </div>
</template>

<script>
var echarts = require('echarts');
require('echarts-wordcloud');
import "echarts/lib/chart/bar";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import "echarts-wordcloud";
export default {
  name: "groupCharts",
    data() {
    return {
      menuText: '选择视图',
    }
  },
  methods:{
    onClickDropdown(item) {
      this.menuText = item;
      var info = []
      for (var k in this.groupInfo[item]) {
        var json = {
          value: this.groupInfo[item][k],
          name: k
        }
        info.push(json);
      }
      console.log(info)
      var mycharts = echarts.init(document.getElementById("main"));
      var option = {
        backgroundColor: '#ffffff',

        title: {
          text: item,
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0.7, 1]
          }
        },
        series: [
          {
            name: item,
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: info.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.4)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.4)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              // #c23531
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
          }
        ]
      };
      mycharts.setOption(option)
    }
  },
  props:["menulist", "groupInfo"],
}
</script>

<style scoped>

</style>
